<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/Xhtml1/DTD/Xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        
        <title>Treasureto</title>
        
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
        <link rel="stylesheet" href="/style/common.css"> 
        <link rel="stylesheet" href="/style/myaccount.css"> 
        <link rel="stylesheet" href="/style/ui.tabs.css" type="text/css" /> 
        <link rel="stylesheet" href="/style/jqModal.css" type="text/css" /> 
        <link rel="stylesheet" type="text/css" href="/style/style.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
         <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
         <script type="text/javascript" src="http://www.google.com/jsapi"></script>
         <script src="/lib/jquery/ui.tabs.js" type="text/javascript"></script> 
        <script src="/lib/jquery/jquery.oauthpopup.js" type="text/javascript"></script> 
        <script src="/lib/jquery/jquery.livequery.js" type="text/javascript"></script> 
        <script src="/lib/jquery/jqModal.js" type="text/javascript"></script> 
        <script src="/js/myaccount.js" type="text/javascript"></script>
        <script src="/js/iso8601.js" type="text/javascript"></script>
        <script src="/js/index.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="global-nav">
            <h1 id="logo">
                <a href="/" title="Home | Service">Treasureto</a>
            </h1>
            <div id="profile">
                <span class="profile-image">
                    <img src=""/>
                </span>
                <span class="profile-name">
                </span>
                <span class="profile-links">
                    <!--<span class="user-menu">-->
                    <img src="image/setting.png"/>
                    <ul class="profile-links-doropdown">
                        <li><a href="/settings">設定</a></li>
                        <!--
                        <li><a href="/support">ヘルプ</a></li>
                        -->
                        <li><a href="/logout">ログアウト</a></li>
                    </ul>
                </span>
            </div>
        </div>

        <div id="menu">
            <div id="account">
            <form method="selectt" action="">
                <span id="account-title">
                    表示するアカウント
                </span>
                <ul class="account-list">
                    <li style="background-image:url(image/twitter.png)">
                    <!--<input type="checkbox" id="add-twitter-account"/>-->
                    <span style="margin-left: 15px;" t>Twitter</span></li>
                    <li style="margin-left: 15px;">
                        <ul style="list-style:none;">
                            <li style="margin: 3px;">
                                <input type="radio" name="twitter-radio" value="0" id="add-twitter-account"/>
                                <span>Home</span>
                            </li>
                            <li style="margin: 3px;">
                                <input type="radio" name="twitter-radio" value="1" class="menu_class">
                                <span>list</span>
                                <ul style="display: none;list-style: none; margin-left: 15px;" class="the_menu">
                                </ul>
                            </li>
                        </ul>
                    <li style="background-image:url(image/facebook.png)">
                    <input type="checkbox" id="add-facebook-account" />
                    <span>Facebook</span></li>
                    <!--li style="background-image:url(image/facebook.png)">
                    <input type="checkbox" name="a003" value="group"/>
                    <span>group</span></li-->
                    <!--li style="background-image:url(image/google+.png)">
                    <input type="checkbox" name="a004" value="Google+"/>
                    <span>Google+</span></li-->
                    <!--li style="background-image:url(image/linkedin.png)">
                    <input type="checkbox" name="a005" value="Linkedin"/>
                    <span>Linkedin</span></li-->
                    <!--li style="background-image:url(image/tumblr.png)">
                    <input type="checkbox" name="a006" value="tumblr"/>
                    <span>tumblr</span></li-->
                    <li style="background-image:url(image/rss.png)">
                    	<span style="padding:20px;">RSS</span> <button id="add-rss-feed" style="font-size:10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Add Rss feed</button>
                    	<c:if test="${rssSize>0}">
                    		<ul id="rss-list">
                    			<c:forEach var="obj" items="${rsses}" varStatus="status">
                    				<li><input type="checkbox" value="${obj.url}"/><c:out value="${obj.title}"/></li>
								</c:forEach>
					  		</ul>
						</c:if>
                    </li>
                </ul>
                <div style="padding:10px 5px;"><a href="#" id="add-account-feed">アカウントを追加する</a></div>
            </form>
            </div>
            <div class="follow-scrap">
                <span id="follow-scrap-title">
                    フォローしているクリップブック
                </span>
                <ul class="follow-scrap-list">
                    <li style="background-image:url(image/Bookmarks2.png)">
                    <input type="checkbox" name="s000" value="ベンチャートレンド"/>
                    <span>ベンチャートレンド</span></li>
                    <li style="background-image:url(image/Bookmarks2.png)">
                    <input type="checkbox" name="s001" value="ソーシャルメディア"/>
                    <span>ソーシャルメディア</span></li>
                    <li style="background-image:url(image/Bookmarks2.png)">
                    <input type="checkbox" name="s002" value="Webデザイン"/>
                    <span>Webデザイン</span></li>
                    <li style="background-image:url(image/Bookmarks2.png)">
                    <input type="checkbox" name="s003" value="話題のニュース"/>
                    <span>話題のニュース</span></li>
                </ul>
            </div>
            <div id="clipbook-list-link">
                <ul>
                    <li>
                        <a href="#">人気のクリップブック</a>
                    </li>
                    <li>
                        <a href="#" id="show-recent-clipbook-list">新着クリップブック</a>
                    </li>
                </ul>
            </div>
        </div>
        <!--</div>-->
        <div id="box">
            <div id="scrap">
                <div id="scrap-title">
                    クリップブック
                </div>
                <ul id="scrap-list">
                </ul>
                <div id="add-scrapbook"><button id="add-scrapbook-button">クリップブックを追加する</button></div>
            </div>
        </div>

<!--        <div id="wrapper">-->
            <div id="feed">
                <!--div id="share">
                    <form method="post" action="">
                        <textarea id="comment"></textarea>
                        <div class="submit">
                            <input type="submit" class="submit" value="投稿"/>
                        </div>
                    </form>
                </div-->
            <div id="clipbook-header" style="display:none;"><span id="pankuzulist"></span><span id="back-timeline">[戻る]<span></div>
            <div id="timeline">
            </div>
            </div>
            <script id="twitter-status-template" type="text/x-jquery-tmpl">
            <div class="feed-item" id="twitter:\${id}">
                <div class="item-title">
                    <div class="item-image">
                        <img height="48" width="48" src='\${profileImageURL}' alt='name' />
                        <img class="service-icon" src="images/social_media_mini_icons/twitter.png"/>
                    </div>
                    <span class="item-name">
                        <a class='item-screen-name user-profile-link' data-user-id='a' href='http://twitter.com/\${screenName}' target="_blank" title='name'>@\${screenName}</a>
                        <span class='tweet-full-name'>Twitter</span>
                    </span>
                </div>
                <div class="item-content">
                    \${text}
                </div>
                <div class="item-state">
                    <span class="item-time-stamp">
                        \${createdAt}
                    </span>
                    <span class="feed-actions">
                        <span class="feed-action action-favorite">
                            <a href="#" class="favorite-action js-toggle-fav" title="お気に入り"><span><i></i><b>お気に入り</b></span></a>
                        </span>
                        <span class="feed-action action-tweet-comment">
                             <a href="#" class="retweet-action js-toggle-rt" title="コメント"><span><i></i><b>コメント</b></span></a>
                        </span>
                        <a href="#" class="reply-action js-action-reply" data-screen-name="name" title="返信"><span><i></i><b>返信</b></span></a>
                    </span>
                </div>
            </div>
            </script>
            <script id="facebook-status-template" type="text/x-jquery-tmpl">
                <div class="feed-item" id="facebook:\${id}">
                    <div class="item-title">
                        <div class="item-image">
                        <img src="http://graph.facebook.com/\${from.id}/picture" height="48" width="48"/>
                        <img class="service-icon" src="images/social_media_mini_icons/facebook.png"/>
                        </div>
                        <span class="item-name">
                            <a class='item-screen-name user-profile-link' data-user-id='a' href='http://www.facebook.com/\${from.id}/' target="blank" title='name'>\${from.name}</a> at Facebook
                        </span>
                    </div>
                    <div class="item-content">
                        \${message}
                    </div>
                    <div class="item-state">
                        <span class="item-time-stamp">
                            \${updated_time}
                        </span>
                        <span class="feed-actions">
                            <span class="feed-action action-good">
                                <a href="#" class="good-action js-toggle-fav" title=""><span><i></i><b>いいね！</b></span></a>
                            </span>
                            <span class="feed-action js-action-comment">
                                <a href="#" class="comment-action js-toggle-rt" title="コメント"><span><i></i><b>コメント</b></span></a>
                            </span>
                        </span>
                    </div>
    	        </div>
            </div>
            </script>
            <script id="facebook-link-template" type="text/x-jquery-tmpl">
                <div class="feed-item" id="facebook:\${id}">
                    <div class="item-title">
                        <div class="item-image">
                            <img src="http://graph.facebook.com/\${from.id}/picture" height="48" width="48"/>
                            <img class="service-icon" src="images/social_media_mini_icons/facebook.png"/>
                        </div>
                        <span class="item-name">
                            <a class='item-screen-name user-profile-link'   data-user-id='a' href='http://www.facebook.com/\${from.id}/' target="blank" title='name'>\${from.name}</a> at Facebook
                        </span>
                        <div class="item-content">
                            <div>
                              {{if description}}
                              <p>\${description}</p>
                              {{/if}}
                              {{if story}}
                              <p>\${story}</p>
                              {{/if}}
                              {{if picture}}
                              	<img src="\${picture}"/>
                              {{/if}}
                              {{if link_bk }}
                              <a href="\${link}"><img src="http://capture.heartrails.com/free?\${link}"/></a></td>
                              {{/if}}
                            </div>
	                	 </div>
                         <div class="item-state">
                             <span class="item-time-stamp">
                                 \${updated_time}
                             </span>
                             <span class="feed-actions">
                                 <span class="feed-action action-good">
                                     <a href="#" class="good-action js-toggle-fav" title=""><span><i></i><b>いいね！</b></span></a>
                                 </span>
                                 <span class="feed-action js-action-comment">
                                     <a href="#" class="comment-action js-toggle-rt" title="コメント"><span><i></i><b>コメント</b></span></a>
                                 </span>
                             </span>
                         </div>
    	             </div>
	            </div>
            </script>
            <script id="facebook-photo-template" type="text/x-jquery-tmpl">
                <div class="feed-item" id="facebook:\${id}">
                    <div class="item-title">
                        <div class="item-image">
                            <img src="http://graph.facebook.com/\${from.id}/picture" height="48" width="48"/>
                            <img class="service-icon" src="images/social_media_mini_icons/facebook.png"/>
                        </div>
                        <span class="item-name">
                            <a class='item-screen-name user-profile-link' data-user-id='a' href='http://www.facebook.com/\${from.id}/' target="blank" title='name'>\${from.name}</a> at Facebook
                        </span>
                        <div class="item-content">
                            <p>\${message}<p>
                            <p><img src="\${picture}"/></p>
	        	        </div>
                         <div class="item-state">
                             <span class="item-time-stamp">
                                 \${updated_time}
                             </span>
                             <span class="feed-actions">
                                 <span class="feed-action action-good">
                                     <a href="#" class="good-action js-toggle-fav" title=""><span><i></i><b>いいね！</b></span></a>
                                 </span>
                                 <span class="feed-action js-action-comment">
                                     <a href="#" class="comment-action js-toggle-rt" title="コメント"><span><i></i><b>コメント</b></span></a>
                                 </span>
                             </span>
                         </div>
    	            </div>
	            </div>
            </script>
	    <script id="rss-feed-template" type="text/x-jquery-tmpl">
          <div class="feed-item" id="twitter:\${id}">
            <div class="item-title">
	           <img src="images/social_media_mini_icons/feed.png"/> <span>\${feed_title}</span>
	        </div>
	        <div class="tweet-right-contena">
			    <div class="tweet-screen-name">\${title}</div>
	            <div class="tweet-text"></div>
			    <div class="tweet-created-date">\${publishedDate}</div>
			</div>
	     </div>
    </script>
	<script id="clipbook-template" type="text/x-jquery-tmpl">
       <div id="clipbook-item">
		 <div class="clipbook-item-title">
           <h3>
              <a href="clipbook">\${name}</a><button style="float:right;">follow</button>
           </h3>
           <p class="clipbook-content"></p>
	  	 </div>
	  	 <div class="clipbook-item-owner">
         	<img class="user-image"></img>
                        オーナー
         </div>
       </div>
    </script>
    <div id="recent-clipbook-list" title="新着クリップブック一覧">
    </div>
    </body>
</html>
